@import './variables.scss';
$modalPaddingY: 1.1em;
$modalPaddingX: 1.2em;

.fty-modal {
  margin: 0.4em 0px;
  max-width: 90vw;
  border-radius: 0.5em;
  background-color: white;
  border: 1px solid #edf2f9;
  //box-shadow: 0 0.75rem 1.5rem rgb(18 38 63 / 3%);

  &.fty-modal-sm {
    width: $col-sm-width;
  }
  &.fty-modal-md {
    width: $col-md-width;
  }
  &.fty-modal-lg {
    width: $col-lg-width;
  }
  &.fty-modal-xl {
    width: $col-xl-width;
  }

  .fty-modal-header {
    color: $mainColor;
    border-bottom: 1px solid #edf2f9;
    padding: $modalPaddingY $modalPaddingX;
    i {
      font-size: 0.9em;
    }
    > span {
      font-size: 1em;
      font-weight: 500;
      display: block;
    }
  }

  .fty-modal-body {
    padding: $modalPaddingY $modalPaddingX;
    font-size: inherit;
    > .container {
      padding: 0;
      margin: 0;
      width: inherit;
    }
  }

  .fty-modal-footer {
    font-size: inherit;
    padding: $modalPaddingY $modalPaddingX;
    border-top: 1px solid #edf2f9;;
  }
}


.el-dialog__wrapper {
  .el-dialog {
    max-width: 90vw;
    border-radius: 0.5em;
    .el-dialog__header {
      border-bottom: 1px solid #edf2f9;
    }
    .el-dialog__body {
      font-size: inherit;
      padding: 10px 0px;

      .container {
        padding: 20px;
        width: inherit;
      }

      > .el-form {
        padding: 10px 30px;
      }
    }
    .el-dialog__footer {
      padding-top: 20px;
      border-top: 1px solid #edf2f9;;
    }
  }
  &.fty-modal-sm {
    > .el-dialog {
      width: $col-sm-width;
    }
  }
  &.fty-modal-md {
    > .el-dialog {
      width: $col-md-width;
    }
  }
  &.fty-modal-lg {
    > .el-dialog {
      width: $col-lg-width;
    }
  }
  &.fty-modal-xl {
    > .el-dialog {
      width: $col-xl-width;
    }
  }
}
